<template>
	<!-- 忘记密码 -->
	<div class="forget">
		<p class="forget__header">忘记密码</p>

		<el-form class="forget__body" ref="form" :model="formData" :rules="rules" label-width="80px">
			<el-form-item label="账号" prop="account">
				<el-input v-model="formData.account" placeholder="请输入账号"></el-input>
			</el-form-item>
			<el-form-item label="新密码" prop="password">
				<el-input v-model="formData.password" type="password" placeholder="6~20位数字、字母、符号组合"></el-input>
			</el-form-item>

			<el-form-item label="确认密码" prop="checkPassword">
				<el-input
					v-model="formData.checkPassword"
					type="password"
					placeholder="请再次输入密码确认"
					@keyup.enter.native="submit"
				></el-input>
			</el-form-item>

			<el-form-item label="密令" prop="passCode">
				<el-input v-model="formData.passCode" placeholder="请输入密令" type="password"></el-input>
			</el-form-item>

			<el-form-item>
				<el-row>
					<el-col :span="11">
						<el-button
							style="width: 100%"
							type="primary"
							:loading="submitLoading"
							@click="handleSubmit"
						>确认</el-button>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-button style="width: 100%" type="info" @click="handleCancel">取消</el-button>
					</el-col>
				</el-row>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { updatePass } from '@/api/request'
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'))
			} else if (!/\d/.test(value) || !/[a-zA-Z]/.test(value)) {
				callback(new Error('密码至少要包含数字和字母！'))
			} else {
				if (this.formData.checkPassword !== '') {
					this.$refs.form.validateField('checkPassword')
				}
				callback()
			}
		}
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.formData.password) {
				callback(new Error('两次输入的密码不一致'))
			} else {
				callback()
			}
		}
		return {
			formData: {
				passCode: '',
				password: '',
				checkPassword: '',
			},
			rules: {
				passCode: [
					{
						required: true,
						message: '密令不能为空',
						trigger: 'blur',
					},
				],
				account: [
					{
						required: true,
						message: '账号不能为空',
						trigger: 'blur',
					},
				],
				captcha: [
					{
						required: true,
						message: '请填写验证码',
						trigger: 'blur',
					},
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					},
					{
						validator: validatePass,
						trigger: 'blur',
					},
					{
						min: 6,
						max: 20,
						message: '密码长度为6~20位',
						trigger: 'blur',
					},
				],
				checkPassword: [
					{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur',
					},
					{
						validator: validatePass2,
						trigger: 'blur',
					},
				],
			},
			submitLoading: false,
			captchaLoading: false,
			captchaButtonText: '获取验证码',
		}
	},
	methods: {
		// 设置获取验证码按钮的默认状态
		setDefaultCaptchaButton(timer) {
			clearInterval(timer)
			this.captchaLoading = false
			this.captchaButtonText = '获取验证码'
		},
		// 校验手机号
		validPhone(phone) {
			if (!phone.match(/^1[345789]\d{9}$/)) {
				this.$message.error('请填写正确的手机号！')
				return false
			}
			return true
		},
		// 获取验证码
		async getCaptcha() {
			if (!this.validPhone(this.formData.phone)) return

			// 倒计时
			this.captchaLoading = true
			let totalTime = 60
			let timer = null
			timer = setInterval(() => {
				totalTime--
				if (totalTime > 0) {
					this.captchaButtonText = `获取验证码(${totalTime}s)`
				} else {
					this.setDefaultCaptchaButton(timer)
				}
			}, 1000)

			await this.$api.account.getCaptcha({ phone: this.formData.phone })
			this.$message.success(`验证码已发送至手机${this.formData.phone}，请注意查收！`)
		},
		// 提交
		async handleSubmit() {
			this.submitLoading = true
			if (
				this.formData.password !== this.formData.checkPassword ||
				this.formData.password.length < 6 ||
				this.formData.password.length > 20 ||
				this.formData.account === '' ||
				this.formData.passCode === ''
			) {
				this.$message.warning('请按正确格式填写信息')
				this.submitLoading = false
				return false
			}
			let res = await updatePass({
				pass: this.formData.password,
				account: this.formData.account,
				passCode: this.formData.passCode,
			})
			if (res.state === 'OK') {
				this.submitLoading = false
				this.$message.success('修改成功,请使用新密码进行登录')
				this.$router.replace('/')
			} else {
				this.$message.warning('修改失败，请检查您的账号或密令是否正确！')
				this.submitLoading = false
			}
			// this.$refs.form.validate(async valid => {
			// 	if (valid) {
			// 		await api.account.updatePassword(this.formData)
			// 		this.$message.success('修改成功,请使用新密码进行登录')
			// 		this.$router.replace('/')
			// 		this.submitLoading = false
			// 	} else {
			// 		this.$message.warning('请按正确格式填写信息')
			// 		this.submitLoading = false
			// 	}
			// })
		},
		handleCancel() {
			this.$router.push('/')
		},
	},
}
</script>

<style lang="scss" scoped>
.forget {
	padding: 15px 20px;
	/* background-color: rgba(255, 255, 255, 0); */
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.7);
	border-radius: 10px;
	opacity: 0.9;

	.forget__header {
		font-size: 22px;
		text-align: center;
		color: #fff;
	}

	.forget__body {
		margin-top: 20px;
	}
}
</style>

<style lang="scss">
.forget {
	.el-form-item__label,
	.el-checkbox__label {
		color: #fff;
	}
}
</style>
